<template >
  <div class="container" style="position:relative;">
    <img src="@/assets/cs-img/background.gif" style="height: 100vh;width: 100%; z-index:-1; position:absolute;" alt="">
    <div style="
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        padding:  23px;
        box-sizing: content-box;
        line-height: 50px;">
      <router-link to="/index">
        <van-icon name="revoke" color="#fdc03a" />
      </router-link>
      <span style="font-weight: bold">登录后更精彩</span>
      <div style="margin-top: 10px">与全世界精彩的经历、人和故事相遇</div>
      <van-form :show-error-message="true">
        <van-field v-model="username" name="用户名" placeholder="请输入账号" :rules="telRules" :state="pwdState"
          @blur.native.capture="checkName" />
        <!-- <div show-error-message: '请填写用户名或邮箱'></div> -->
        <van-field v-model="password" :type="passwordType" name="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码',trigger: 'onBlur'}]" :state="pwdState"
          @blur.native.capture="checkPwd">
          <template slot="right-icon">
            <span class="solts" @click="switchPasswordType">
              <van-icon name="closed-eye" v-if="passwordType=='password'" />
              <van-icon name="eye" v-else />
            </span>
          </template>
        </van-field>
        <div style="margin: 40px 0 30px 0">
          <van-button style="color:#fff" round block type="info" native-type="submit" @click="checkForm"
            :disabled="checked==false">登录
          </van-button>
        </div>
        <router-link to="/register">注册新账户</router-link>
        <van-checkbox v-model="checked" style="margin-top: 30px">我已同意
          <router-link to="/agreement">《未冬用户协议》</router-link>
        </van-checkbox>
      </van-form>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // user: {
      //   email: '',
      //   username: '',
      // },
      user: '',
      username: '',
      password: '',
      nameState: '',
      pwdState: '',
      checked: false,
      passwordType: 'password',
      // 校验账号
      telRules: [{
        required: true, message: '账号码不能为空', trigger: 'onBlur/onChange'
      }, {
        // 自定义校验规则
        validator: value => {
          console.log(value)
          return /^[a-zA-Z0-9_-]{6,16}$/
            .test(value)
        },

        message: '请输入正确格式的账号',
        trigger: 'onBlur'
      }],
    };
  },
  methods: {
    // onSubmit(values) {
    //   console.log("submit", values);
    // },
    switchPasswordType() {
      this.passwordType = this.passwordType == 'password' ? 'text' : 'password'
    },
    checkForm() {
      if (this.checkName() && this.checkPwd()) {
        console.log('验证通过，开始登录')
      }
      let url = `http://39.108.211.154:8080/user_login?username=${this.username}&upwd=${this.password}`
      // let url = 'http://39.108.211.154:8080/login?username=123123&upwd=123asd'
      this.axios.get(url).then(res => {
        console.log(res)
        if (res.data == 'Login success') {
          this.$store.commit('updateUserInfo', this.username)
          if (this.$route.query.redirect) {
            this.$router.push({
              path: decodeURIComponent(this.$route.query.redirect)
            })
          } else {
            this.$router.push('/index')
          }
        } else {
          this.$messagebox('提示', '账号或密码错误，请重试')
        }
      })
    },
    checkPwd() {
      let pwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
      if (pwd.test(this.password)) {
        this.pwdState = 'success'
        return true
      } else {
        this.pwdState = 'error'
        return false
      }
    },
    checkName() {
      // let name = /^[a-zA-Z0-9_-]{4,16}$/
      let name = /^[a-zA-Z0-9_-]{6,16}$/
      if (name.test(this.username)) {
        console.log('账号：' + this.username)
        this.nameState = 'success'
        return true
      } else {
        this.nameState = 'error'
        return false
      }
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  padding: 0;
}

.van-form {
  margin-top: 50px;
  text-align: center;

  a {
    color: #fff;

  }
}

// ::v-deep input {
//   width: 80vw;
// }

::v-deep .van-checkbox__label {
  margin-left: 10px;
  color: #fff;
}

::v-deep .van-field__body {
  border-bottom: 1px solid #ebedf0;
}

::v-deep .van-field__control {
  color: #fff;

}

.container {
  overflow: hidden;
  height: 100vh;


  .van-icon {
    display: block;
    margin: 0 0 13px 0;
    font-size: 20px;
  }

  span {
    font-size: 35px;
    color: #fff;
  }

  div {
    color: #fff;

  }

  .router-link-exact-active {
    color: #fff;
  }

  .van-form {
    margin-top: 50px;
    text-align: center;

    a {
      color: #fff;

    }
  }

  .text {
    font-size: 20px;
  }

  .van-cell {
    line-height: 40px;
    height: 80px;
    font-size: 16px;
    border: 0;
    background-color: transparent !important;
    opacity: .8;

    .van-field__error-message {
      font-size: 16px;

    }


    &::after {
      border-bottom: 0px;
    }
  }



  .van-button {
    width: 100%;
    height: 52px;
    border-radius: 26px;
    background-color: #fdc03a;
    border: 0;
    color: #fff;

    .van-button__text {
      font-size: 20px;
      // color: #fff;

    }
  }

  .van-grid {
    width: 50%;

    .van-image__img {
      width: 24px;
    }
  }

  img {
    height: 24px;
  }

}
</style>